<template>
  <el-tag :type="tagType" :effect="effect" :size="size" v-bind="$attrs">
    <slot>{{ displayText }}</slot>
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElTag } from 'element-plus'

// 类型定义
type TagType = '' | 'success' | 'warning' | 'danger' | 'info'
type Effect = 'light' | 'dark' | 'plain'
type Size = 'large' | 'default' | 'small'
type StatusKey = string | number | boolean
type StatusProcessor = (status: StatusKey) => string

// 状态配置
interface StatusConfig {
  [key: string]: {
    type: TagType
    text: string
  }
}

interface Props {
  status?: StatusKey
  config?: StatusConfig
  effect?: Effect
  size?: Size
  defaultType?: TagType
  defaultText?: string
}

const props = withDefaults(defineProps<Props>(), {
  status: '',
  config: () => ({}),
  effect: 'light',
  size: 'default',
  defaultType: 'info',
  defaultText: '未知状态',
})

  const statusConfig = computed(() => {
    return props.config || {}
  })

  const tagType = computed(() => {
    const statusKey = String(props.status)
    if (statusConfig.value[statusKey]) {
      const type = statusConfig.value[statusKey].type
      return type === '' ? undefined : type
    }
    const defaultType = props.defaultType
    return defaultType === '' ? undefined : defaultType
  })

  const displayText = computed(() => {
    const statusKey = String(props.status)
    if (statusConfig.value[statusKey]) {
      return statusConfig.value[statusKey].text
    }
    return props.defaultText
  })
</script>
